<script setup>
import { Plus } from '@element-plus/icons-vue';
import { userStore } from "~/composables/useUserStore";

const store = userStore()
</script>

<template>

    <section class="boxCon">
        <div class="boxLeft">
            <div>
                <img class="title" src="~/assets/resources/index/creationTitle.png" alt="">
            </div>

            <div class="body">
                <div>
                    <p class="info">
                        立即上传，让您的创意为您带来收入！
                        每一个作品都是您独一无二的财富！
                    </p>
                </div>

                <div class="pcBtn">
                    <img class="bg" src="~/assets/resources/index/creationBg.png" alt="">
                </div>
            </div>

            <div class="footer">
                <button class="btn" @click="store.isLogin?navigateTo('/resources/uploadResources'):store.visiable = true">
                    <el-icon>
                        <Plus />
                    </el-icon>
                    <span class="text">
                        发布
                    </span>
                </button>
            </div>
        </div>
        <div class="mobileBtn">
            <img class="bg" src="~/assets/resources/index/creationBg.png" alt="">
        </div>
    </section>

</template>

<style scoped lang="scss">
h1,h2,p{
    margin: 0;
}
.mobileBtn {
    display: none;
}

.boxCon {
    border-radius: 10px;
    background-color: #ffffff;
    position: relative;
    padding: 16px 18px 24px 18px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.title {
    width: 82px;
}

.body {
    display: flex;
    align-items: center;

    .info {
        font-size: 14px;
        color: #666666;
    }

    .bg {
        width: 145px;
    }
}

.footer {
    margin-top: 12px;
}

.btn {
    cursor: pointer;
    width: 100%;
    background-color: transparent;
    border: 1px solid #4384FF;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3px 0;
    color: #4384FF;
    font-size: 18px;

    .text {
        margin-left: 5px;
    }
}

@media screen and (max-width:768px) {
    .boxCon{
        display: none;
    }
    .mobileBtn {
        display: block;
        width: 40%;
        flex: none;
        img{
            display: block;
            width: 100%;
        }
    }

    .pcBtn {
        display: none;
    }
    .boxCon{
        padding: 0;
    }
    .boxLeft{
        padding: 10px;
        .body{
            margin-top: 5px;
        }
        .btn{
            font-size: 14px;
            width: 70%;
        }
    }
}
</style>